<template>
    <div class="loginContainer">
        <head-top @getLoginWay="getLoginWay"></head-top>
        <div class="loginForm" v-if="loginWay">
            <!-- 手机登录 -->
            <div class="inputContainer">
                <input type="text" placeholder="手机号" name="phoneName" v-model="phoneName">
            </div>
             <div class="inputContainer">
                <input type="text" placeholder="验证码" name="checkCode" v-model="checkCode">
                <button class="getCheckBtn" @click.prevent="getCheck" v-show="!computedTime">获取验证码</button>
                <button class="getCheckBtn" v-show="computedTime">已发送({{computedTime}}s)</button>
            </div>
            <div class="tip">
                温馨提示：{{tipmsg}}
            </div>
            <button class="btn" @click.prevent="sendLogin">登录</button>
        </div>
        <div class="loginForm" v-else>
            <!-- 密码登录 -->
            <div class="inputContainer">
                <input type="text" placeholder="手机号" name="phoneName" v-model="phoneName">
            </div>
            <div class="inputContainer">
                <input type="password" placeholder="密码" name="password" v-model="password">
            </div>
            <div class="inputContainer">
                <input type="text" placeholder="验证码" name="checkCode" v-model="checkCode">
                <div class="imageCheck">
                    <img :src="checkImage" width="80px" height="40px" @click.prevent="selectImage">
                </div>
            </div>
            <div class="tip">
                温馨提示：{{tipmsg}}
            </div>
            <button class="btn" @click.prevent="passwordLogin">登录</button>
        </div>
    </div>
</template>
<script>
    import headTop from '../components/header'
    import axios from "axios";
    import { MessageBox } from 'mint-ui'
    import {mapMutations} from 'vuex'
    export default{
        data(){
            return{
                loginWay:true,//是手机登录还是密码登录
                phoneName:null,//手机号
                password:null,//密码
                checkCode:null,//验证码
                computedTime:0,//倒数计时
                checkImage:'/captcha?time='+new Date(),
                tipmsg:"若手机号还未注册过，第一次登录的时自动注册",//温馨提示的信息
            }
        },
        computed:{
            //判断手机号
            checkPhoneName:function(){
                return /^1\d{10}$/gi.test(this.phoneName)
            }
        },
        components:{
            headTop,
        },
        methods:{
            ...mapMutations(['setFirstLogin']),
            //发送手机登录信息
            async sendLogin(){
                if(this.phoneName==null||this.phoneName=="")
                    this.tipmsg="手机号不可为空";
                else if(this.checkCode==null||this.checkCode=="")
                    this.tipmsg="验证码不可为空";
                else if(!this.checkPhoneName)
                    this.tipmsg="手机号不正确";
                else if(this.phoneName!=null&&this.checkCode!=null&&this.phoneName!=""&&this.checkCode!=""){
                    let postData=this.$qs.stringify({
                        phoneName:this.phoneName,
                        checkCode:this.checkCode
                    });
                    await this.postRequest('/login/phonelogin',postData,null).then(response=>{
                        if(response.obj.status==0)
                            this.tipmsg="验证码错误,请重新输入";
                        else if(response.obj.status==1){
                            this.tipmsg="登录成功，欢迎使用饿了么";
                            const tokenStr=response.obj.tokenHead+response.obj.token;
                            window.sessionStorage.clear();
                            window.sessionStorage.setItem('tokenStr',tokenStr);
                            this.getFirstLogin();
                            setTimeout(()=>{this.$router.push('home');},500);
                        }
                        else if(response.obj.status==2){
                            this.tipmsg="登录成功，欢迎使用饿了么";
                            const tokenStr=response.obj.tokenHead+response.obj.token;
                            window.sessionStorage.clear();
                            window.sessionStorage.setItem('tokenStr',tokenStr);
                            MessageBox.confirm('请完善账户安全信息','提示').then(action => {
                                this.$router.push({path:'userInformation'});
                            }).catch(error=>{
                                this.$router.push('home');
                            });
                            this.getFirstLogin();
                        }
                    })
                }
            },
            //发送密码登录信息
            async passwordLogin(){
                if(this.phoneName==null||this.phoneName=="")
                    this.tipmsg="手机号不可为空";
                else if(this.password==null||this.password=="")
                    this.tipmsg="密码不可为空";
                else if(this.checkCode==null||this.checkCode=="")
                    this.tipmsg="验证码不可为空";
                else if(!this.checkPhoneName)
                    this.tipmsg="手机号不正确";
                else if(this.phoneName!=null&&this.checkCode!=null&&this.password!=null&&this.phoneName!=""&&this.checkCode!=""&&this.password!=""){
                    let postData=this.$qs.stringify({
                        phoneName:this.phoneName,
                        checkCode:this.checkCode,
                        password:this.password
                    });
                    await this.postRequest('/login/passwordlogin',postData,null).then(response=>{
                        if(response.obj.status==0)
                            this.tipmsg="验证码错误，请重新输入";
                        else if(response.obj.status==1){
                            this.tipmsg="登录成功，欢迎使用饿了么";
                            const tokenStr=response.obj.tokenHead+response.obj.token;
                            window.sessionStorage.clear();
                            window.sessionStorage.setItem('tokenStr',tokenStr);
                            this.getFirstLogin();
                            this.$router.push('home');
                        }
                        else if(response.obj.status==2)
                            this.tipmsg="无此用户，请重新输入";
                        else if(response.obj.status==3)
                            this.tipmsg="此用户未设置密码，请使用手机验证登录";
                        else if(response.obj.status==4)
                            this.tipmsg="密码错误，请重新输入";
                    })
                }
            },
            //判断今天是否是首次登录
            async getFirstLogin(){
                let tokenStr=window.sessionStorage.getItem("tokenStr");
                await this.getRequest('/redPaper/getFirstLoginToday',null,tokenStr).then(response=>{
                    if(response.code==200){
                        this.setFirstLogin(response.obj);
                    }
                })
            },
            //获取登录方式
            async getLoginWay(data){
                this.loginWay=data;
                if(this.loginWay)
                    this.tipmsg="若手机号还未注册过，第一次登录的时自动注册";
                else this.tipmsg="若未设置过用户密码，请通过手机号登录，并设置用户密码";
            },
            //获取短信验证码
            async getCheck(){
                if(this.phoneName){//是否输入手机号
                    this.computedTime=30;
                    this.timer=setInterval(()=>{
                        this.computedTime--;
                        if(this.computedTime==0){
                            clearInterval(this.timer);//清除计时器
                        }
                    },1000);
                }else{
                    this.tipmsg="请输入手机号，再发送验证码";
                }
            },
            //获取图片验证码
            async selectImage(){
                this.checkImage='/captcha?time='+new Date();
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
//lang的属性可选scss(sass)/less等
//scoped是指定样式的局部作用域
    @import '../style/mixin';
    @import '../style/login.scss';
</style>